import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/viewmodel/change_pwd_view_model.dart';

import '../../shared/app_theme.dart';
import '../../widgets/custom_ui.dart';
import '../../widgets/gradient_button.dart';
import '../../widgets/shadow_container.dart';

class ChangePwdContent extends StatelessWidget {
  ChangePwdContent({super.key});

  final ChangePwdViewModel viewModel = Get.find<ChangePwdViewModel>();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
            colors: [AppTheme.bgStartColor, AppTheme.bgEndColor]),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            ShadowContainer(
              border: Border.all(color: AppTheme.orangeColor),
              margin: EdgeInsets.symmetric(horizontal: 12.px, vertical: 8.px),
              padding: EdgeInsets.only(
                  left: 8.px, right: 8.px, top: 32.px, bottom: 56.px),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  buildContent(
                      context.l10n.new_pwd_hint, viewModel.pwdVisible),
                  SizedBox(
                    height: 12.px,
                  ),
                  buildContent(context.l10n.confirm_pwd_hint,
                      viewModel.confirmPwdVisible),
                  SizedBox(
                    height: 56.px,
                  ),
                  buildButton(context),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildContent(String hintText, RxBool visible) {
    return Obx(() => TextField(
          obscureText: true,
          controller: viewModel.controller,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20.px),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(horizontal: 10.px),
            filled: true,
            fillColor: Colors.white,
            hintText: hintText,
            enabledBorder: getWhiteOvalBorder(),
            focusedBorder: getFocusedBorder(),
            suffixIcon: IconButton(
              onPressed: () {
                visible.value = !visible.value;
              },
              icon: Icon(
                visible.value ? Icons.visibility : Icons.visibility_off,
                color: AppTheme.orangeColor,
              ),
            ),
          ),
        ));
  }

  Widget buildButton(BuildContext context) {
    return GradientButton(
        onPressed: () {
          print(viewModel.controller.text);
        },
        child: Text(
          context.l10n.confirm,
          style: TextStyle(color: Colors.white, fontSize: 20.px),
        ));
  }
}
